﻿<!DOCTYPE html>
<html lang="en">

<head>
    <title>跨浏览器调用高拍仪测试demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        .MainUp {
            display: flex;
            flex-direction: row;
        }

        .MainDown {
            display: flex;
            flex-direction: row;
        }

        .btnNone {
            background-color: cadetblue;
            pointer-events: none;
        }

        .btnZC {
            background-color: red;
        }

        .descInputRed {
            background-color: red;
        }

        .descInputGreen {
            background-color: greenyellow;
        }
    </style>
</head>

<script src="jquery.min.js"></script>
<!-- 人脸识别部分 -->
<script>
    function VerificaPic() {  
        $.ajax({
            // url: 'https://faceidcardb.shumaidata.com/getfaceidb',
            url: 'https://vidface.market.alicloudapi.com/lundear/idface',
            data: {
                'idcard': document.getElementById("certNumber").value,
                'image': document.getElementById("CameraPhoto").src,
                // 'image': document.getElementById("CameraIDs").src,
                'name': document.getElementById("partyName").value
            },
            headers: { 'Authorization': 'APPCODE 40fef2cc01184ee78196e9039a3932b6', 'contentType': 'application/x-www-form-urlencoded; charset=utf-8' },
            type: "post",
            success: function (data) {
                console.log(data);
                document.getElementById("ReturnCode").value = data.code;
                document.getElementById("Returndesc").value = data.desc;
                if (data.code === 0) {
                    document.getElementById("Returndesc").setAttribute("class", "descInputGreen");
                } else {
                    document.getElementById("Returndesc").setAttribute("class", "descInputRed");
                }

                $.ajax({
                    type: "POST",
                    url: 'https://visitorapp.chinabrake.com/Visitor/AddRecognizingFaces',
                    //url: 'http://192.168.2.140:2200/Visitor/AddRecognizingFaces',
                    //url: 'https://localhost:44378/Visitor/AddRecognizingFaces',

                    data: {
                        returncode: data.code,
                        returndesc: data.desc,
                        image: document.getElementById("CameraPhoto").src,
                        vortid: document.getElementById("tvisitorid").value 
                    },
                    dataType: "JSON",
                    crossDomain: true,
                    xhrFields: {
                        withCredentials: true
                    },
                    success: function (datas) {
                        console.log(datas);
                    }, error: function (ss) {
                        console.log(ss);

                    }
                });



            }
        });
    };  
</script>

<body>
    <div>
        <input type="text" name="" id="TextInfo" style="width: 196px;">
    </div>
    <!-- 摄像展示要用video标签 -->
    <video id="video" class="bg" "></video>
    <div class=" MainDown">
        <div style="font-size: 30px;">
            <canvas id="qr-canvas" style="display: none;"></canvas>
        </div>

        <div style="display:flex;flex-direction: column;">
            <img id="CameraPhoto" src="takeapicture.png"
                style="width: 200px;height: 200px;border: 1px solid white; background:white;" />
            姓名 <input type="text" name="" id="partyName" style="width: 196px;">
            身份证号 <input type="text" name="" id="certNumber" style="width: 196px;">
            <input type="text" name="" id="ReturnCode" style="display: none;">
            识别结果
            <!-- <input type="text" name="" id="Returndesc" style="width: 300px;" readonly> -->
            <textarea name="" id="Returndesc" cols="30" rows="3" style="width: 196px;" readonly></textarea>
            <input type="number" name="identifynums" id="identifynums" value="0" style="display: none;">
            <input type="text" name="" id="tvisitorid" style="display:none ;">
            <input type="button" class="btnZC" id="btnPaiZhao"
                style="width:200px;margin-top: 20px;height: 50px;background: red;color: wheat;font-size: 30px; display: none;"
                value="开始识别" onclick="drawMedia();" />

        </div>
        </div>
</body>
<script type="text/javascript">
    var video = document.querySelector('video');
    var text = document.getElementById('text');
    var canvas1 = document.getElementById('qr-canvas');
    var context1 = canvas1.getContext('2d');
    var mediaStreamTrack;



    // 一堆兼容代码
    window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
    if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
    }
    if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function (constraints) {
            var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
            if (!getUserMedia) {
                return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
            }
            return new Promise(function (resolve, reject) {
                getUserMedia.call(navigator, constraints, resolve, reject);
            });
        }
    }

    //摄像头调用配置
    var mediaOptsQ = {
        audio: false,
        video: true,
        video: { facingMode: "environment" }, // 调用前置摄像头
        video: { width: 200, height: 200 },  //影响呈现的大小。注意不能用百分比
        //  video: { facingMode: { exact: "environment" } }// 这个是调用后置摄像头
    }


    // 回调
    function successFunc(stream) {
        mediaStreamTrack = stream;
        video = document.querySelector('video');
        if ("srcObject" in video) {
            video.srcObject = stream
        } else {
            video.src = window.URL && window.URL.createObjectURL(stream) || stream
        }
        video.play();
        document.getElementById("TextInfo").value = "设备开启成功";
    }
    function errorFunc(err) {
        alert(err.name);
    }

    // 正式启动摄像头
    function openMediaQ() {
        document.getElementById("TextInfo").value = "正在开启设备请稍后......";
        navigator.mediaDevices.getUserMedia(mediaOptsQ).then(successFunc).catch(errorFunc);

    }


    //关闭摄像头
    function closeMedia() {
        mediaStreamTrack.getVideoTracks().forEach(function (track) {
            track.stop();
            context1.clearRect(0, 0, context1.width, context1.height);//清除画布
        });
    }

    //截取视频
    function drawMedia() {

        document.getElementById("identifynums").value = 1;
        //parseInt(document.getElementById("identifynums").value)+
        canvas1.setAttribute("width", video.videoWidth);
        canvas1.setAttribute("height", video.videoHeight);
        context1.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
        let base64Info = getImageBase64Data()
        document.getElementById("CameraPhoto").setAttribute("src", base64Info);
        var idcard = document.getElementById("certNumber").value;
        var personName = document.getElementById("partyName").value;
        console.log(idcard);
        console.log(personName); 
        if (idcard !== "" && personName !== "") {
            VerificaPic();
        } else {
            document.getElementById("Returndesc").setAttribute("class", "descInputRed");
            if (idcard === "") {
                document.getElementById("Returndesc").value = "身份证号不能为空";
            }
            if (personName === "") {
                document.getElementById("Returndesc").value = "姓名不能为空";
            }
        }

    }

    function getImageBase64Data() {
        let cropImgInfo = context1.getImageData(0, 0, video.videoWidth, video.videoHeight)
        let newCanvas = document.createElement('canvas')
        newCanvas.width = video.videoWidth
        newCanvas.height = video.videoHeight
        let newCtx = newCanvas.getContext('2d')
        newCtx.putImageData(cropImgInfo, 0, 0)
        return newCanvas.toDataURL()
    }
    window.onload = function () {
        openMediaQ()

    };
</script>

</html>